<template>
    <div class="footer">
      <ul>
        <li v-for="(item,index) in data" @click="active(item)" :key="index">
          <img :src="item.bol?item.src1:item.src" alt=""><br>
          <span :class="{active:item.bol}">{{item.txt}}</span>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "Footer",
      data(){
        return {
          data:[
            {path:'/',src:'./static/lyl/home.png',src1:'./static/lyl/home0.png',txt:'推荐',bol:true},
            {path:'/active',src:'./static/lyl/active.png',src1:'./static/lyl/active1.png',txt:'活动',bol:false},
            {path:'/shop',src:'./static/lyl/shop.png',src1:'./static/lyl/shop2.png',txt:'商城',bol:false},
            {path:'/boshi',src:'./static/lyl/boshi.png',src1:'./static/lyl/boshi2.png',txt:'学院',bol:false},
            {path:'/personal',src:'./static/lyl/my.png',src1:'./static/lyl/my3.png',txt:'我的',bol:false},

          ]
        }
      },
      created(){
        if (this.$route.path == '/'){
          this.data[0].bol = true;
          this.data[1].bol = false;
          this.data[2].bol = false;
          this.data[3].bol = false;
          this.data[4].bol = false;
        }
        if (this.$route.path == '/active'){
          this.data[0].bol = false;
          this.data[1].bol = true;
          this.data[2].bol = false;
          this.data[3].bol = false;
          this.data[4].bol = false;
        }
        if (this.$route.path == '/shop'){
          this.data[0].bol = false;
          this.data[1].bol = false;
          this.data[2].bol = true;
          this.data[3].bol = false;
          this.data[4].bol = false;
        }
        if (this.$route.path == '/boshi'){
          this.data[0].bol = false;
          this.data[1].bol = false;
          this.data[2].bol = false;
          this.data[3].bol = true;
          this.data[4].bol = false;
        }
        if (this.$route.path == '/personal'){
          this.data[0].bol = false;
          this.data[1].bol = false;
          this.data[2].bol = false;
          this.data[3].bol = false;
          this.data[4].bol = true;
        }
      },
      methods:{
        active(i){
          this.$router.push(i.path);
        }
      }
    }
</script>

<style scoped>
   .footer{
     position: fixed;
     bottom: 0;
     width: 100%;
     border-top: 1px solid #dcdcdc;
     background: #fff;
   }
   .footer ul{
     display: flex;
     justify-content: space-between;
     padding: 13px 72px;
   }
   .footer ul li{
     text-align: center;
     align-self: flex-end;
   }
   .footer ul li img{
     width: 50px;
     height: 50px;
   }
   .footer ul li span{
     font-size: 22px;
     margin-top: 11px;
   }
   .footer ul li .active{
     color:#884ca4;
   }
</style>
